<template>
    <div>
        <!-- 通过kk的值控制显示的内容 -->
        <div v-if="kk==1">
            <!-- 这里是属性绑定，也可以用 v-bind ,实现了组件的传值-->
            <GoodList :goodId="1"></GoodList>
        </div>
        <div v-else-if="kk==2">
            <GoodList v-bind:goodId="2"></GoodList>
        </div>
        <div v-else-if="kk==3">
            33333333333
        </div>
        <div v-else-if="kk==4">
            4444444444
        </div>
        <div v-else>
            <GoodList v-bind:goodId="1"></GoodList>
        </div>
    </div>
</template>

<script>
    // 引入事件总线
    import Msg from './Msg.js'
    // 引入自定义组件
    import GoodList from "./GoodList"
    // 下面这种写法也可以
    // import GoodList from "./GoodList.vue"

    export default {
        name: "Right",
        data() {
            return {
                kk: 0
            }
        },
        mounted() {
            // _this 是 this 的副本，不能用this，因为页面中不同的this含义不同，所以要用一个副本存储
            var _this = this;
            // 此处的 val 接收 left.vue 中兄弟节点传过来的值，然后 val 的值再传给m
            Msg.$on('val', function (m) {
                _this.kk = m;
                // 这里不能用 this.kk ，因为它表示的是on里面的内容，这就是前面为什么用_this的原因
                // this.kk = m //错误
            })
        },
        // 组件注册放在这里
        components: {
            GoodList
        }
    }
</script>

<style scoped>

</style>
